<template>
  <div class="planOrderReportDetail">
    <ele-page
      v-loading="loading"
      :formConfig="searchConfig"
      ref="eleTable"
      :operateList="operateList"
      @handleOperateEvent="handleOperateEvent"
      :column="column"
      :initForm="initForm"
      :transFormdata="transFormdata"
      :getList="getList"
      @handleReset="handleReset"
      uniqueId="planOrderReportTable"
    >
      <product-analysis :analysisData="analysisData" />
    </ele-page>
  </div>
</template>

<script>
import { operateList, searchConfig } from "./config";
import productAnalysis from "./components/product-analysis.vue";
import {
  getPlanOrderReport as getList,
  getOrderStatusList,
  getYesOrNot,
  getProdOrderTypeList,
} from "@/api/report/mesProdOrderPlanPassRatio";
import uploadNoAuto from "@/components/upload-no-auto";
import moment from "moment";
export default {
  name: "planOrderReport",
  components: {
    uploadNoAuto,
    productAnalysis,
  },
  mixins: [searchConfig],
  data() {
    const _this = this;
    return {
      title: null,
      visible: false,
      initForm: {},
      isLoading: false,
      loading: false,
      analysisData: {},
      statusList: [],
      formDataDialog: {},
      // searchConfig,
      operateList,
      getList,
      isLoadingImport: false, // 导入数据loading
      importData: {}, //导入数据
      importVisible: false,
      // 列表页字段的绑定配置
      column: [
        {
          type: "selection",
        },
        {
          type: "index",
          label: $i18n.t("common.order"),
          width: 60,
          fixed: "left",
        },
        // {
        //   prop: "barcode",
        //   label: "条码",
        //   fixed: "left",
        //   minWidth: 150,
        //   showOverflowTooltip: true,
        // },
        {
          prop: "planCode",
          label: $i18n.t("planOrderMerge.planCode"), //生产订单编码
          minWidth: 180,
          fixed: "left",
          showOverflowTooltip: true,
        },
        {
          prop: "prodCode",
          label: $i18n.t("planOrderMerge.prodCode"), //产品编码
          minWidth: 120,
          showOverflowTooltip: true,
        },
        {
          prop: "prodName",
          label: $i18n.t("planOrderMerge.prodName"), //产品名称
          minWidth: 120,
          showOverflowTooltip: true,
        },
        {
          prop: "planBeginDate",
          label: $i18n.t("planOrderMerge.planBeginDate"),
          minWidth: 120,
          showOverflowTooltip: true,
        },
        {
          prop: "planEndDate",
          label: $i18n.t("planOrderMerge.planEndDate"),
          minWidth: 120,
          showOverflowTooltip: true,
        },
        {
          prop: "actualBeginDate",
          label: $i18n.t("planOrderMerge.actualBeginDate"),
          minWidth: 120,
          showOverflowTooltip: true,
        },
        {
          prop: "actualEndDate",
          label: $i18n.t("planOrderMerge.actualBeginDateTime"),
          minWidth: 120,
          showOverflowTooltip: true,
        },
        {
          prop: "quantity",
          label: $i18n.t("planOrderMerge.quantity"), //数量
          minWidth: 130,
          showOverflowTooltip: true,
        },
        {
          prop: "actualQuantity",
          label: $i18n.t("planOrderMerge.actualQuantity"), //数量
          minWidth: 130,
          showOverflowTooltip: true,
        },
        {
          prop: "qualifiedQty",
          label: $i18n.t("planOrderMerge.qualifiedQty"), //数量
          minWidth: 130,
          showOverflowTooltip: true,
        },
        {
          prop: "unqualifiedQty",
          label: $i18n.t("planOrderMerge.unqualifiedQty"), //数量
          minWidth: 130,
          showOverflowTooltip: true,
        },
        {
          prop: "workshopName",
          label: $i18n.t("planOrderMerge.workshopName"),
          minWidth: 180,
          showOverflowTooltip: true,
        },
        {
          prop: "lineName", //线体名称
          label: $i18n.t("common.lineName"),
          minWidth: 180,
          showOverflowTooltip: true,
        },
        {
          prop: "prodOrderType",
          label: $i18n.t("planOrderMerge.prodOrderType"),
          width: 100,
          // fixed: "right",
          optionProp: {
            value: "value",
            label: "description",
          },
          option: async (data) => {
            const list = await getProdOrderTypeList();
            return list.data.result;
          },
        },
        {
          prop: "completeRatio",
          label: $i18n.t("planOrderMerge.completeRatio"),
          minWidth: 100,
          showOverflowTooltip: true,
          fixed: "right",
        },

        {
          prop: "immediatelyOpen",
          label: $i18n.t("planOrderMerge.immediatelyOpen"),
          width: 100,
          fixed: "right",
          optionProp: {
            value: "value",
            label: "description",
          },
          option: async (data) => {
            const list = await getYesOrNot();
            return list.data.result || [];
          },
        },
        {
          prop: "immediatelyClose",
          label: $i18n.t("planOrderMerge.immediatelyClose"),
          width: 100,
          fixed: "right",
          optionProp: {
            value: "value",
            label: "description",
          },
          option: async (data) => {
            const list = await getYesOrNot();
            return list.data.result || [];
          },
        },
        {
          prop: "orderStatus",
          label: $i18n.t("planOrderMerge.orderStatus"),
          width: 100,
          fixed: "right",
          render: (h, { row }) => {
            let data = _this.statusList.find((ite) => {
              return row.orderStatus == ite.value;
            });
            let tags = [
              "danger",
              "warning",
              "Brand",
              "success",
              "info",
              "info",
              "info",
              "info",
              "info",
            ];
            return (
              <el-tag type={tags[parseInt(data.value) + 1]}>
                {data.description}
              </el-tag>
            );
          },
        },
      ],
    };
  },
  computed: {},
  methods: {
    // 跳转工单详情
    goworkDetails(row) {
      // saleCode
      this.$router.push({
        path: "/order/mesProdOrderPlan/workSee",
        query: {
          id: row.orderCode,
        },
      });
    },
    async transFormdata(data) {
      let { page, analyze } = data.data.result;

      {
        /* 上方卡片统计 */
      }
      this.analysisData = analyze;
      return { records: page.records, total: page.total };
    },
    async getStatusList() {
      const list = await getOrderStatusList();
      this.statusList = list.data.result;
      console.log("status:", this.statusList);
    },
    //表格顶部按钮操作事件
    handleOperateEvent(data) {
      this.title = data.name;
      const fnc = {};
      {
        /* fnc[data.handleName](); */
      }
    },
    //刷新表格数据
    refresh(isReset = true) {
      console.log("params:", 111111111);
      this.initParams();
      this.$refs.eleTable.refresh(isReset);
    },
    initParams() {
      let timer = moment().subtract(0, "days").format("YYYY-MM-DD");
      this.initForm = { searchTimeType: "1", actualEndDate: [timer, timer] };
    },
    handleReset() {
      this.refresh();
    },
  },
  created() {
    this.getStatusList();
    this.initParams();
    console.log("111:", this.searchConfig);
  },
  activated() {
    this.getStatusList();
  },
};
</script>
<style lang="scss" scoped>
.planOrderReportDetail {
  .card {
    padding-bottom: 10px;
    .card-item {
      text-align: center;
      .label {
        color: #5a6f82;
        font-size: 14px;
      }
      .value {
        color: #000;
        font-size: 16px;
        font-weight: 600;
        line-height: 26px;
      }
    }
  }
}
</style>
